<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../../iconfont/iconfont.css">
    <link rel="stylesheet" href="../../iconfont/font/iconfont.css">
    <link rel="stylesheet" href="../../css/nav.css">
    <link rel="stylesheet" href="../../css/header_nav.css">
    <link rel="stylesheet" href="../../css/xitongshouye/gongzuoribao.css">
    <script src="../../lib/jquery/jquery-3.6.0.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script src="../../js/xitongshouye/gongzuoribao.js"></script>
</head>

<body>
    <div class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">确认提示</h4>
                </div>
                <div class="modal-body">
                    <p>退出系统确认</p>
                    <p>确认要退出登录吗?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary outlogin">确定</button>
                </div>
            </div>
        </div>
    </div>
    <header class="clearfix">
        <div class="row">
            <div class="col-md-7 col-xs-7">
                <img src="../../iconfont-img/yuan.png" alt="">
                <h4>教师人力资源管理系统</h4>
            </div>
            <div class="col-md-5 col-xs-5">
                <div class="row">
                    <div class="col-md-4 col-xs-4">
                        <div id="search_name">
                            <input type="text" placeholder="请输入员工姓名"><span class="iconfont icon-search2"></span>
                        </div>

                    </div>
                    <div class="col-md-6 col-xs-6">
                        <div class="row">
                            <div class="col-md-3 col-xs-3">
                                <div>
                                    <span class="iconfont icon-table_fill"></span>事项
                                    <div id="matter_div">
                                        <div>待办事项</div>
                                        <div class="row">
                                            <div class="col-md-6 col-xs-6">
                                                ●今日待审批请假申请（<span class="matter_num">0</span>）
                                            </div>
                                            <div class="col-md-6 col-xs-6">
                                                ●今日待审批加班申请（<span class="matter_num">0</span>）
                                            </div>
                                            <div class="col-md-6 col-xs-6">
                                                ●待处理的劳动合同续签（<span class="matter_num">0</span>）
                                            </div>
                                            <div class="col-md-6 col-xs-6">
                                                ●今日审批的出差申请（<span class="matter_num">0</span>）
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-xs-3">
                                <a href="../sider_nav/date.html"><span class="iconfont icon-kaoqin"></span>日历</a>
                            </div>
                            <div class="col-md-3 col-xs-3">
                                <a href=""><span class="iconfont icon-kaoqin"></span>消息</a>
                            </div>
                            <div class="col-md-3 col-xs-3">
                                <a href="../sider_nav/lock.html"><span class="iconfont icon-kaoqin"></span>锁屏</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-xs-2" id="user_div">
                        <div>
                            <span class="iconfont icon-ren"></span>Admin<span class="iconfont icon-shanglajiantou"></span>
                            <div id="pull_down">
                                <div><a href="../sider_nav/changemsg.html">修改资料</a></div>
                                <div><a href="../sider_nav/changeimg.html">修改头像</a></div>
                                <div><a href="../sider_nav/changepwd.html">修改密码</a></div>
                                <div class="logout"><a href="../sider_nav/login.html">退出登录</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="row" id="main">
        <nav id="nav_left" class="col-md-2 col-xs-2">
            <ul>
                <li><a href="../xitongshouye--shikaiwen/shouye.html"><span class="iconfont icon-jurassic_home"></span>系统首页</a></li>
                <li><a href="../zuZhiGuanLi--wangHeng/zuZhiGuanLiDaoHang.html"><span class="iconfont icon-daifenpei"></span>组织管理</a></li>
                <li><a href="../zhaoPinGuanLi--songJiaYu/zhaoPinGuanLiShouYe.html"><span class="iconfont icon-ren"></span>招聘管理</a></li>
                <li><a href="../renshiguanli/renshiguanlidaohang.html"><span class="iconfont icon-sangeren"></span>人事管理</a></li>
                <li><a href="../kaoQinGuanLi--JiangPeng/kaoQinGuanLi.html"><span class="iconfont icon-kaoqin"></span>考勤管理</a></li>
                <li><a href="../xinchouFuLi--Heyinhua/xinchouFuLishouye.html"><span class="iconfont icon-shipin-sige"></span>薪酬福利</a></li>
                <li><a href="../../pages/xitongshouye--shikaiwen/gonggao.html"><span class="iconfont icon-laba"></span>通知公告</a></li>
                <li><a href="../XiTongGuanLi/XiTong.html"><span class="iconfont icon-shezhi"></span>系统管理</a></li>
            </ul>
        </nav>
        <div class="content_nav col-md-10 col-xs-10">
            <!-- 这个是内容上面带房子的导航栏 -->
            <div class="pull-left">
                <a href=""><span class="iconfont icon-jurassic_home"></span></a>
                <span class="iconfont icon-youjiantou"></span>一级分类
                <a href=""><span class="iconfont icon-youjiantou"></span>报告统计</a>
            </div>
            <div class="pull-right">
                <a href=""><span class="iconfont icon-zuojiantou"></span></a>
                <a href=""><span class="iconfont icon-zhongzhi"></span></a>
            </div>
        </div>
        <div class="col-md-10 col-xs-10" id="content">
            <div class="container xx">
                <div class="row">
                    <p><span class="tijiao">提交的日报</span><span class="tongji">统计报告</span></p>
                </div>
                <div class="tab">
                    <div class="tableXuan1">
                        <div id="sousuo">
                            <div class="col-md-2">
                                <input type="text" placeholder="搜索关键词" class="input">
                            </div>
                            <div class="col-md-2">
                                <select name="" class="input">
                  <option value="">报告类型</option>
                  <option value="日报">日报</option>
                  <option value="周报">周报</option>
                  <option value="月报">月报</option>
                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="text1" placeholder="提交人员" class="input">
                            </div>
                            <div class="col-md-2">
                                <input type="text2" placeholder="抄送人员" class="input">
                            </div>
                            <div class="col-md-2">
                                <input type="text" placeholder="搜索关键词" class="input">
                            </div>
                            <div class="col-md-2">
                                <button class="blue_btn btn query"><span class="iconfont icon-search2"></span><span
                    class="mar ">查询</span>
                </button>
                                <button class="white_btn btn reset"><span class="iconfont icon-zhongzhi"></span><span
                    class="mar ">重置</span></button>
                            </div>
                        </div>
                        <div class="rTable table table-striped">
                            <div class="row">

                                <div class="col-md-1">
                                    <button class="blue_btn btn1"><span class="iconfont icon-jiahao"></span><span
                      class="mar tianjia">添加</span>
                  </button>
                                </div>
                                <div class="col-md-1">
                                    <button class="white_btn btn2"><span class="iconfont icon--daochu"></span><span class="mar">导出</span>
                    <span class="iconfont icon-shanglajiantou"></span></button>
                                </div>
                            </div>
                            <table class="mtable  table-striped">
                                <thead>
                                    <tr>

                                    </tr>
                                </thead>
                                <tbody class="mtbody">
                                    <!-- <tr>
                    
                  </tr> -->
                                </tbody>
                            </table>
                            <div class="col-md-6 col-md-offset-6 col-xs-6">
                                <div class="col-md-6 col-xs-6">
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination">
                                            <li>
                                                <a href="#" aria-label="Previous" class="page_left">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                            <li id="myli" class="new_page ">

                                            </li>
                                            <li>
                                                <a href="#" aria-label="Next" class="page_right">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                                <div class="col-md-6 col-xs-6">
                                    <div class="dropdown">
                                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                      每页条数
                      <span class="caret"></span>
                    </button>
                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                            <!-- <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li> -->
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="tableXuan2">
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-pr active ri">
                <input type="checkbox" checked>日报
              </label>
                            <label class="btn btn-pr zhou">
                <input type="checkbox">周报
              </label>
                            <label class="btn btn-pr yue">
                <input type="checkbox">月报
              </label>
                        </div>
                        <div class="tableX">
                            <div>
                                <div class="bao1">
                                    <table class="myTable table table-striped  table-bordered" border>
                                        <thead>
                                            <tr>
                                                <th>姓名</th>
                                                <th>周一</th>
                                                <th>周二</th>
                                                <th>周三</th>
                                                <th>周四</th>
                                                <th>周五</th>
                                                <th>周六</th>
                                                <th>周日</th>
                                                <th>完成率</th>
                                            </tr>
                                        </thead>
                                        <tbody class="ttian ti">
                                            <tr>

                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="col-md-6 col-md-offset-6 col-xs-6">
                                        <div class="col-md-6 col-xs-6">
                                            <nav aria-label="Page navigation">
                                                <ul class="pagination">
                                                    <li>
                                                        <a href="#" aria-label="Previous" class="page_left">
                                                            <span aria-hidden="true">&laquo;</span>
                                                        </a>
                                                    </li>
                                                    <li id="myli" class="new_page">

                                                    </li>
                                                    <li>
                                                        <a href="#" aria-label="Next" class="page_right">
                                                            <span aria-hidden="true">&raquo;</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="col-md-6 col-xs-6">
                                            <div class="dropdown">
                                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                          每页条数
                          <span class="caret"></span>
                        </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                                    <!-- <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li> -->
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="bao2">
                                    <table class="myTable table table-striped  table-bordered" border>
                                        <thead>
                                            <tr>
                                                <th>姓名</th>
                                                <th>第一周</th>
                                                <th>第二周</th>
                                                <th>第三周</th>
                                                <th>第四周</th>
                                                <th>第五周</th>
                                                <th>完成率</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tzhou  ti">
                                            <tr>

                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="col-md-6 col-md-offset-6 col-xs-6">
                                        <div class="col-md-6 col-xs-6">
                                            <nav aria-label="Page navigation">
                                                <ul class="pagination">
                                                    <li>
                                                        <a href="#" aria-label="Previous" class="page_left">
                                                            <span aria-hidden="true">&laquo;</span>
                                                        </a>
                                                    </li>
                                                    <li id="myli" class="new_page">

                                                    </li>
                                                    <li>
                                                        <a href="#" aria-label="Next" class="page_right">
                                                            <span aria-hidden="true">&raquo;</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="col-md-6 col-xs-6">
                                            <div class="dropdown">
                                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                          每页条数
                          <span class="caret"></span>
                        </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                                    <!-- <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li> -->
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bao3">
                                    <table class="myTable table table-striped  table-bordered" border>
                                        <thead>
                                            <tr>
                                                <th>姓名</th>
                                                <th>1月</th>
                                                <th>2月</th>
                                                <th>3月</th>
                                                <th>4月</th>
                                                <th>5月</th>
                                                <th>6月</th>
                                                <th>7月</th>
                                                <th>8月</th>
                                                <th>9月</th>
                                                <th>10月</th>
                                                <th>11月</th>
                                                <th>12月</th>
                                                <th>完成率</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tyue ti">
                                            <tr>

                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="col-md-6 col-md-offset-6 col-xs-6">
                                        <div class="col-md-6 col-xs-6">
                                            <nav aria-label="Page navigation">
                                                <ul class="pagination">
                                                    <li>
                                                        <a href="#" aria-label="Previous" class="page_left">
                                                            <span aria-hidden="true">&laquo;</span>
                                                        </a>
                                                    </li>
                                                    <li id="myli" class="new_page">

                                                    </li>
                                                    <li>
                                                        <a href="#" aria-label="Next" class="page_right">
                                                            <span aria-hidden="true">&raquo;</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="col-md-6 col-xs-6">
                                            <div class="dropdown">
                                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                          每页条数
                          <span class="caret"></span>
                        </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                                    <!-- <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li> -->
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>


                        </div>

                    </div>
                </div>


            </div>

        </div>
    </div>
    <div class="modal  richeng" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">写工作报告</h4>
                </div>
                <div class="modal-body">
                    <div class="co">
                        <span><span>*</span>报告类型：</span>
                        <select name="" id="select6">
              <option value="日报">日报</option>
              <option value="周报">周报</option>
              <option value="月报">月报</option>
            </select>
                        <span>日期</span>
                        <input type="date">
                    </div>

                    <div class="co">
                        <span><span>*</span>工作总结：</span>
                        <div><textarea name="" id="" cols="60" rows="10" placeholder="请输入工作总结"></textarea></div>
                    </div>
                    <div class="co">
                        <span><span> </span> 文件上传：</span>
                        <button> <span class="iconfont icon--daochu"></span>选择附件</button>
                        <p>支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB</p>
                    </div>
                    <div class="co">
                        <span><span> </span> 抄送人员：</span>
                        <input type="text2">
                    </div>
                    <div class="co">
                        <span><span>*</span>标题：</span>
                        <input type="text">
                    </div>
                    <div class="co">
                        <span><span></span>提交人员：</span>
                        <input type="text1">
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btnq" data-dismiss="modal">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</body>
<script src="../../js/nav.js"></script>
<script>
    $('.container').on('click', '.tijiao', function() {
        $('.tijiao').css('color', '#0079FE')
        $('.tongji').css('color', '#666')
        $('.tableXuan1').css('display', 'block')
        $('.tableXuan2').css('display', 'none')
    })
    $('.container').on('click', '.tongji', function() {
        $('.tongji').css('color', '#0079FE')
        $('.tijiao').css('color', '#666')
        $('.tableXuan2').css('display', 'block')
        $('.tableXuan1').css('display', 'none')
    })
    $('.tableXuan2').on('click', '.ri', function() {
        $('.ri').css({
            'color': 'white',
            'backgroundColor': '#0079FE',
            'border': '#0079FE'
        })
        $('.zhou').css({
            'color': '#999999',
            'backgroundColor': '#FFFFFF',
            'border': '#E4E4E4'
        })
        $('.yue').css({
            'color': '#999999',
            'backgroundColor': '#FFFFFF',
            'border': '#E4E4E4'
        })
        $('.bao1').css('display', 'block')
        $('.bao2').css('display', 'none')
        $('.bao3').css('display', 'none')
    })
    $('.tableXuan2').on('click', '.zhou', function() {
        $('.ri').css({
            'color': '#999999',
            'backgroundColor': '#FFFFFF',
            'border': '#E4E4E4'
        })
        $('.zhou').css({
            'color': 'white',
            'backgroundColor': '#0079FE',
            'border': '#0079FE'
        })
        $('.yue').css({
            'color': '#999999',
            'backgroundColor': '#FFFFFF',
            'border': '#E4E4E4'
        })
        $('.bao1').css('display', 'none')
        $('.bao2').css('display', 'block')
        $('.bao3').css('display', 'none')
    })
    $('.tableXuan2').on('click', '.yue', function() {
        $('.ri').css({
            'color': '#999999',
            'backgroundColor': '#FFFFFF',
            'border': '#E4E4E4'
        })
        $('.zhou').css({
            'color': '#999999',
            'backgroundColor': '#FFFFFF',
            'border': '#E4E4E4'
        })
        $('.yue').css({
            'color': 'white',
            'backgroundColor': '#0079FE',
            'border': '#0079FE'
        })
        $('.bao1').css('display', 'none')
        $('.bao2').css('display', 'none')
        $('.bao3').css('display', 'block')
    })


    $('.tianjia').click(function() {
            $('.richeng').modal('show')
            $('.btnq').click(function() {
                $.ajax({
                    url: '/baogao/add',
                    method: 'post',
                    data: {
                        g_date: $('.co input[type=date]').val(),
                        g_baogao: $('.co input[type=text]').val(),
                        g_name: $('.co input[type=text1]').val(),
                        g_leixing: $('.co #select6').val(),
                        g_chaosong: $('.co input[type=text2]').val(),
                    },
                    success: (res) => {
                        console.log(res);
                        getData();
                    }
                })
            })

        })
        // //搜索
    $('.query').click(() => {
        console.log($('#sousuo input[type=text2]').val());
        console.log($('#sousuo select').val());
        console.log($('#sousuo input[type=text]').val());
        $.ajax({
            url: '/baogao/sousuo',
            method: 'post',
            data: {
                g_chaosong: $('#sousuo input[type=text2]').val(),
                g_leixing: $('#sousuo select').val(),
                g_name: $('#sousuo input[type=text1]').val(),
                g_baogao: $('#sousuo input[type=text]').val()
            },
            success: (res) => {
                if (res.error) {
                    console.log(res.err);
                } else {
                    // 渲染表格
                    $('.mtbody').html('')
                    $(res.data).each((i, item) => {
                        $('.mtbody').append(`
                        <tr data-id="${item.g_id}">
                        <td><div>
                        <p>日期</p>
                        <p>${item.g_date.slice(0, 10)}</p>
                        </div></td>
                        <td>
                        <div>
                        <p>标题</p>
                        <p>${item.g_baogao}</p>
                        </div></td>
                        <td>
                        <div>
                        <p>提交人员</p>
                        <p>${item.g_name}</p>
                        </div></td>
                        <td><div>
                        <p>日报类型</p>
                        <p>${item.g_leixing}</p>
                        </div></td>
                        <td><div>
                        <p>抄送人员</p>
                        <p>${item.g_chaosong}</p>
                        </div></td>
                        
                        <td class='btnb'>
                        <span class='iconfont icon-youjiantou'>详情</span></td>
                        </tr>
                    `)
                    })
                    $('#myli').html('')
                    maxpage = Math.ceil((res.total / count))
                    for (let i = 1; i <= Math.ceil((res.total / count)); i++) {
                        if (page == i) {
                            $('#myli').append(`
                                <a id="a" class="active new_page" href="javascript:;">${i}</a>
                                        `)
                        } else {
                            $('#myli').append(`
                        <a href="javascript:;" id="a">${i}</a>
                       `)
                        }
                    }
                }

            }
        })

    })

    //重置
    $('.reset').click(() => {
        getData()
    })
    $('.pagination').on('click', '#a', function() {
        console.log($(this).text());
        page = $(this).text();
        getData();
    });


    //点击修改页面条数
    function getpage(arr) {
        pageArr.forEach(item => {
            $('.dropdown-menu').append(`
                    <li data-num="${item}">
                       <a href="#">每页 ${item} 条</a>
                    </li> 
       `)
        })
        $('.dropdown-menu').on('click', 'li', function() {
            console.log($(this).attr('data-num'))
            count = parseInt($(this).attr('data-num'))
                // let Arr=$(this).parents('button').text()
                // console.log($(this).parents().s)
            getData();
        })
    }
    getpage(pageArr)

    //点击上一页
    $('.pagination').on('click', '.page_left', function() {
        // console.log($(this).text())
        if (page > 1) {
            page--
        } else {
            page = 1
        }
        getData()
    })

    //点击下一页
    $('.pagination').on('click', '.page_right', function() {
        // console.log($(this).text())
        if (page != maxpage) {
            page++
        } else {
            page = maxpage
            console.log(maxpage)
        }
        getData()
    })

    // if () {

    // }
</script>

</html>